<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .detail{width: 1519px;height: 750px;background-color: rgb(241, 238, 238);}
        .head{width: 1519px;height: 40px;background-color: rgb(247, 224, 224);}
        .head li{float: right;width: 65px;text-align: center;font-size: 13px;border-right: 1px solid rgb(160, 158, 158);margin-top: 10px;}
        .head a{color: rgb(160, 158, 158);}
        .head a:hover{color: rgb(224, 90, 90);}
        .head li:nth-child(1){margin-right: 100px;border: none;}
        .nav{width: 1519px;height: 80px;background-color: white;border-bottom: 3px rgb(212, 210, 210) solid;}
        .nav img{float: left;margin-left: 80px;margin-right: 120px;width: 200px;height: 100px;margin-top: -10px;}
        .nav li{width: 120px;height: 80px;text-align: center;line-height: 80px;float: left;position: relative;}
        .nav li:hover{background-color: palevioletred;border-radius: 10px;}
        .nav li:hover .iconfont{color: white;}
        .nav li:nth-child(1){background-color: palevioletred;border-radius: 10px;}
        .nav a{color: black;}
        .nav input{float: right;margin-right: 200px;width: 240px;height: 25px;border-radius: 10px;margin-top: 25px;outline: none;background-color: pink;border: none;}
        .icon-fangdajing{float: right;margin-top: 27px;position: absolute;top: 44px;right:205px;}
        .wenzi p{width: 1519px;height: 30px;text-align: center;font-size: 13px;line-height: 30px;}
        .main{width: 1519px;height: 600px;}
        .da {float: left;width: 450px;height: 450px;margin: 20px 60px 0px 120px;}
        .mainx{width: 600px;height: 570px;float: left;}
        .mainx img{width: 450px;height: 450px;margin-left: 140px;}
        .mainx li{width: 65px;height: 65px;margin-right: 10px;margin-top: 20px;float: left;}
        .mainx li:nth-child(1){margin-left: 170px;}
        .mainx li img{width: 60px;height: 60px;margin: 2.5px;}
       
       
        .mainx1{width: 700px;height: 550px;float: left;margin-top: 20px;}
        .main h3{font-weight: normal;}
        .main b{color: red;margin-top: 5px;display: block;margin-bottom: 15px;}
        .main i{width: 650px;height: 130px;background-color: rgb(221, 219, 219);display: block;margin-left: 15px;padding-left: 20px;margin-top: 10px;padding-top: 15px;}
        .mainx1 p{color: brown;font-size: 25px;margin-top: 10px;}
        .mainx1 m{font-size: 17px;margin-left: 25px;margin-top: 10px;}
        .mainx1 span{width: 100px;height: 20px;color: rgb(253, 251, 251);text-align: center;line-height: 20px;display: block;position: absolute;top: 0px;left: -110px;background-color: rgba(165, 42, 42, 0.904);}
        .mainx1 h4{font-weight: normal;font-size: 13.5px;margin-left: 120px;position: relative;margin-top: 10px;}
        .mainx2{width: 700px;height: 25px;margin-top: 20px;}
        .mainx2 li{width: 170px;height: 25px;border: 1px solid black;float: left;margin-left: 20px;text-align: center;line-height: 25px;margin-top: 5px;font-size: 12.5px;}
       
        .mainx2 li:nth-child(1){border: none;width: 80px;font-size: 13px;text-align: left;}
        .mainx3{width: 700px;height: 25px;margin-top: 20px;}
        .mainx3 li{width: 100px;height: 35px;border: 1px solid black;float: left;margin-left: 20px;text-align: center;line-height: 35px;margin-top: 5px;font-size: 12.5px;}
       
        .mainx3 li:nth-child(1){border: none;width: 80px;font-size: 13px;text-align: left;}
        .mainx4{width: 700px;height: 25px;margin-top: 20px;}
        .mainx4 li{width: 150px;height: 25px;border: 1px solid black;float: left;margin-left: 20px;text-align: center;line-height: 25px;margin-top: 5px;font-size: 12.5px;}
      
        .mainx4 li:nth-child(1){border: none;width: 80px;font-size: 13px;text-align: left;}

        .mainx6{width: 700px;height: 25px;margin-top: 20px;position: relative;}
        .mainx6 li{width: 190px;height: 50px;float: left;margin-left: 20px;text-align: center;line-height: 50px;margin-top: 5px;color: white;background-color: rgb(243, 130, 130);}
        .mainx6 li:hover{background-color: rgb(194, 19, 19);}
        .mainx6 a{color: rgb(255, 251, 251);font-size: 22.5px;}
        .mainx6 li:nth-child(1){border: black 1px solid;width: 48px;font-size: 13px;text-align: left;background-color: rgba(165, 42, 42, 0);text-align: center;font-size: 20px;color: black;margin-right: 30px;}
        .mainx6 h1{width: 20px;height: 24px;text-align: center;line-height: 20px;font-weight: normal;font-size: 20px;position: absolute;top: 5px;left: 69px;border: black 1px solid;}
        .mainx6 h1 a{color: #000000;}
        .mainx6 h2 a{color: black;}
        .mainx6 h2{width: 20px;height: 24px;text-align: center;line-height: 20px;font-weight: normal;font-size: 20px;position: absolute;top: 31px;left: 69px;border: black 1px solid;}
        .iconfont{color: rgb(238, 11, 86);}
    </style>
</head>
<body>
    <div class="detail">
          <div class="head">
                 <ul>
                     <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/cart.html">购物车</a></li>
                     <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/index.html">返回首页</a></li>
                     <li><a href="">我的订单</a></li>
                     <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/item.html">注册</a></li>
                     <li><a href="file:///C:/Users/LENOVO/Desktop/e-pet-website/login.html">登录</a></li>
                 </ul>
          </div>
          <div class="nav">
            <img src="./img/cat-logo.png" alt="">
            <ul>
                <li class="iconfont icon-yugutou"><a href="">品牌特卖</a></li>
                <li class="iconfont icon-yugutou"><a href="">潮品视频</a></li>
                <li class="iconfont icon-yugutou"><a href="">小剧场</a></li>
                <li class="iconfont icon-yugutou"><a href="">E宠课堂</a></li>
                <li class="iconfont icon-yugutou"><a href="">萌爪联盟</a></li>
            </ul>
            <input type="text" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;精品猫粮"><span class="iconfont icon-fangdajing"></span>
          </div>
          <div class="wenzi">
            <p>喜乐比SharlovY 三文鱼鸡肉毛球控制配方成猫粮1.4kg 三文鱼鸡肉毛球控制配方成猫粮 三文鱼鸡肉毛球控制配方成猫粮</p>
        </div>
        <div class="main">
            <div class="mainx">
                 <img src="./img/3.jpg" alt="">
                 
                 <ul id="uls">
                     <li style="background-color: brown;"><img src="./img/01.jpg" alt=""></li>
                     <li><img src="./img/002.jpg" alt=""></li>
                     <li><img src="./img/03.jpg" alt=""></li>
                     <li><img src="./img/04.jpg" alt=""></li>
                     <li><img src="./img/005.jpg" alt=""></li>
                 </ul>
            </div>
            <div class="mainx1">
                 <h3>喜乐比SharlovY 三文鱼鸡肉毛球控制配方成猫粮1.4kg</h3>
                 <b>【新品上市】① 预订立省20 ② 80%肉类 ③ 猫咪口腹之欲 </b>
                 <i>
                   <p>￥320.00<m>原价 ￥400.00 </m></p>
                   <h4><span>热卖中</span>鸡肉毛球控制配方成猫粮</h4>
                   <h4><span>赠送积分</span>赠送32E宠币</h4>
                </i>
                <div class="mainx2">
                 <ul>
                     <li>选择规格</li>
                     <li>1.8kg</li>
                     <li>5.4kg</li>
                 </ul>
                </div> 
                <div class="mainx3">
                    <ul>
                        <li>味道</li>
                        <li>牛肉味</li>
                        <li>骨头味</li>
                        <li>香辣味</li>
                    </ul>
                   </div> 
                   <div class="mainx4">
                    <ul>
                        <li>送至</li>
                        <li>境外</li>
                        <li>河南省内</li>
                        <li>省外</li>
                    </ul>
                   </div>
                   <div class="mainx6">
                    <ul>
                        <li id="shuzi">1</li>
                        <li id="btn"><a href="cart.html">加入购物车</a></li>
                        <li><a href="">立即购买</a></li>
                    </ul>
                    <h1>+</h1><h2>-</h2>
                   </div>
            </div>
            
        </div>
    </div>
    <script src="./js/axios.min.js"></script>
    <script>
        let lis = document.querySelectorAll(".mainx2 li ");
        let lis2 = document.querySelectorAll(".mainx3 li ");
        let lis3 = document.querySelectorAll(".mainx4 li ");
       lis.forEach(function(v,i){
           v.onclick = function(){
               lis.forEach(function(vLis){
                   vLis.style.color= "";
                   vLis.style.border= "";
               })
              v.style.color = "red" ;
              v.style.border = "red solid 1px" ;

           }
       })
       lis2.forEach(function(v,i){
           v.onclick = function(){
               lis2.forEach(function(vLis){
                   vLis.style.color= "";
                   vLis.style.border= "";
               })
              v.style.color = "red" ;
              v.style.border = "red solid 1px" ;
           }
       })
       lis3.forEach(function(v,i){
           v.onclick = function(){
               lis3.forEach(function(vLis){
                   vLis.style.color= "";
                   vLis.style.border= "";
               })
              v.style.color = "red" ;
              v.style.border = "red solid 1px" ;
           }
       })
    </script>
    <script>
        let h1 = document.querySelector('.mainx6 h1');
        let h2 = document.querySelector('.mainx6 h2');
        let shuzi = document.querySelector('#shuzi');
        /* let i = shuzi.value; */
        h1.onclick = function(){
            shuzi.innerHTML++;
        }
        h2.onclick = function(){
            shuzi.innerHTML--;
            if(shuzi.innerHTML < 1){
                shuzi.innerHTML = 1;
            }
        }
        
    </script>
     <script>
        let lis1 =document.querySelectorAll('#uls li');
        lis1.forEach(function(v,i){
            v.onclick = function(){
                lis1.forEach(function(vLis){
                    vLis.style.backgroudColor = "";
                })
                v.style.backgroudColor = "brown";
            }
        })
    </script> 
    <script>
        /* 根据商品 id 获取商品详情接口

        接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
        接口请求方式：get
        接口参数：
        id  商品的id
        使用方式
        获取id为1的商品的详情
         http://jx.xuzhixiang.top/ap/api/detail.php?id=1
        服务器返回json数据 */
        let searchObj = new URLSearchParams(location.search);
        console.log(searchObj);

        let pid = searchObj.get("id");
        console.log(pid);
        let detailProductAPI = "http://jx.xuzhixiang.top/ap/api/detail.php";
        axios.get(detailProductAPI, { params: { id: pid } })
            .then((r) => {
                let pObj = r.data.data;
                console.log(pObj);
                let imgs= document.querySelector(".mainx img");
                let h3= document.querySelector(".mainx1 h3");
                let p= document.querySelector(".mainx1 p");
                let m= document.querySelector(".mainx1 m");
                let pp = document.querySelector('.wenzi p')
                imgs.src= pObj.pimg;
                h3.innerHTML = pObj.pname;
                pp.innerHTML = pObj.pname;
                p.innerHTML= pObj.pdesc;
                m.innerHTML = pObj.pdesc;

            });

    </script>
    <script>
        /* 
        给用户购物车中添加商品 接口

       接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
       接口请求方式：get
       接口参数：
          uid  用户id
          pid  商品id
          pnum  要添加的商品数量
        使用方式

          http://jx.xuzhixiang.top/ap/api/add-product.php?uid=1&pid=1&pnum=1
          服务器返回json数据 */
          let btn = document.querySelector("#btn");
          btn.onclick = function(){
              location.href = "cart.html"
              let shuzi1 = document.querySelector('#shuzi');
              let goAPI = "http://jx.xuzhixiang.top/ap/api/add-product.php";
              let pnum = shuzi1.innerHTML;
              axios.get(goAPI, { params: { pid, uid: 87598, pnum} }).then((r) => {
              console.log(r.data);
            //   location.href = "cart.html"
        });
          }
          
    </script>
</body>
</html>